<template>
  <BasicForm @register="register" class="basicForm" @get="getFormData" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicForm } from '@/components/Form';
  import { FormSchema, useForm } from '@/components/Form';

  // 定义响应式数据
  const formData = ref<any>({});
  const groupOptions = ref([]);
  const shoeOptions = ref([]);

  // 设置表单数据
  function setFormData(data: any) {
    formData.value = data;
  }

  // 设置选项数据
  function setOptions(options: any) {
    if (options?.groupOptions) {
      groupOptions.value = options.groupOptions;
    }
    if (options?.shoeOptions) {
      shoeOptions.value = options.shoeOptions;
    }
  }

  // 获取表单数据
  function getFormData(data: any) {
    setFormData(data);
  }

  // 定义表单结构
  const schemas: FormSchema[] = [
    {
      field: 'shoeReplace',
      component: 'NSelect',
      label: '更换铁鞋编号',
      labelMessage: '',
      giProps: {
        span: 1,
      },
      componentProps: {
        multiple: false,
        filterable: true,
        remote: true,
        labelField: 'shoeCode',
        valueField: 'shoeId',
        options: shoeOptions,
      },
      rules: [
        {
          required: true,
          message: '请选择更换的铁鞋',
          trigger: ['change', 'submit'],
        },
      ],
    },
    {
      field: 'teamId',
      component: 'NSelect',
      label: '作业班组',
      labelMessage: '',
      giProps: {
        span: 1,
      },
      componentProps: {
        multiple: false,
        filterable: true,
        remote: true,
        labelField: 'groupName',
        valueField: 'groupId',
        options: groupOptions,
      },
      rules: [
        {
          required: true,
          message: '请选择作业班组',
          trigger: ['change', 'submit'],
        },
      ],
    },
    {
      field: 'replaceReason',
      component: 'NInput',
      label: '更换原因',
      labelMessage: '',
      giProps: {
        span: 1,
      },
      componentProps: {
        type: 'textarea',
        placeholder: '请输入',
        showCount: true,
        maxlength: 300,
        autosize: {
          minRows: 3,
          maxRows: 6,
        },
      },
    },
  ];

  // 初始化表单
  const [register, { submit, setFieldsValue }] = useForm({
    gridProps: {
      cols: 1,
    },
    labelWidth: 120,
    layout: 'horizontal',
    showActionButtonGroup: false,
    schemas,
  });

  // 设置表单字段值
  function setFormFieldsValue(values: any) {
    setFieldsValue(values);
  }

  // 暴露方法给父组件
  defineExpose({
    submit,
    setFormData: setFormFieldsValue,
    getFormData,
    setOptions,
  });
</script>

<style scoped>
  .basicForm {
    width: 100%;
  }
</style>
